<template>
    <div class="node">
        <div v-if="nodeShow">
            <van-nav-bar :title="$t('ecology_node.title')" leftArrow @click-left="_return"/>
            <div class="nodeMain">
                <van-cell v-if="mine.status === 2">
                    <template slot="title">
                        <van-icon name="volume" />
                        {{$t('ecology_node.notice_two')}}
                    </template>
                    <template>
                        <button @click="changeLight">{{$t('ecology_node.button_three')}}</button>
                        <button @click="changeLead">{{$t('ecology_node.button_four')}}</button>
                    </template>
                </van-cell>
                <van-cell v-if="mine.status === 3">
                    <template slot="title">
                        <van-icon name="volume" />
                        {{$t('ecology_node.still_one')}}
                    </template>
                    <template>
                        <button @click="changeLead">{{$t('ecology_node.button_four')}}</button>
                    </template>
                </van-cell>
                <van-cell v-if="mine.status === 4">
                    <template slot="title">
                        <van-icon name="volume" />
                        {{$t('ecology_node.still_two')}}
                    </template>
                    <template>
                        <button @click="changeLight">{{$t('ecology_node.button_three')}}</button>
                    </template>
                </van-cell>
                <van-cell class="last" v-if="mine.status === 5" icon="volume" :title="$t('ecology_node.still_three')"></van-cell>
                <div class="rent" v-if="mine.status === 2">
                    <div class="nodes">
                        <div class="zhu">
                            <p>

                            </p>
                            <button class="btn">{{$t('ecology_node.effective')}}</button>
                        </div>
                    </div>
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                            <p>{{nodeNum}}<span>{{$t('info.sod')}}</span></p>
                            <span>{{$t('ecology_node.effective')}}</span>
                        </van-col>
                        <van-col @click.native="showLow">
                            <img src="../../assets/light.png" alt="">
                            <span>{{$t('ecology_node.button_three')}}</span>
                        </van-col>
                        <van-col @click.native="showMain">
                            <img src="../../assets/main.png" alt="">
                            <span>{{$t('ecology_node.button_four')}}</span>
                        </van-col>
                    </van-row>
                </div>
                <div class="rentsr" v-if="mine.status === 3">
                    <div class="nodes">
                        <div class="qing">{{$t('ecology_node.button_three')}}</div>
                    </div>
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                            <p>{{nodeNum}}<span>{{$t('info.sod')}}</span></p>
                            <span>{{$t('ecology_node.effective')}}</span>
                        </van-col>
                        <van-col @click.native="showLow">
                            <img src="../../assets/light.png" alt="">
                            <span>{{$t('ecology_node.button_three')}}</span>
                        </van-col>
                        <van-col @click.native="showMain">
                            <img src="../../assets/main.png" alt="">
                            <span>{{$t('ecology_node.button_four')}}</span>
                        </van-col>
                        <van-col @click.native="destoryNode">
                            <img src="../../assets/destroy.png" alt="">
                            <span>{{$t('ecology_node.destroy')}}</span>
                        </van-col>
                    </van-row>
                </div>
                <div class="rentsr" v-if="mine.status === 4">
                    <div class="nodes">
                        <div class="zhu"><p>{{$t('ecology_node.button_four')}}</p></div>
                    </div>
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                            <p>{{nodeNum}}<span>{{$t('info.sod')}}</span></p>
                            <span>{{$t('ecology_node.effective')}}</span>
                        </van-col>
                        <van-col @click.native="showLow">
                            <img src="../../assets/light.png" alt="">
                            <span>{{$t('ecology_node.button_three')}}</span>
                        </van-col>
                        <van-col @click.native="showMain">
                            <img src="../../assets/main.png" alt="">
                            <span>{{$t('ecology_node.button_four')}}</span>
                        </van-col>
                        <van-col @click.native="destoryNode">
                            <img src="../../assets/destroy.png" alt="">
                            <span>{{$t('ecology_node.destroy')}}</span>
                        </van-col>
                    </van-row>
                </div>
                <div class="rents" v-if="mine.status === 5">
                    <div class="nodes">
                        <div class="qing">{{$t('ecology_node.button_three')}}</div>
                        <div class="zhu"><p>{{$t('ecology_node.button_four')}}</p></div>
                    </div>
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                            <p>{{nodeNum}}<span>{{$t('info.sod')}}</span></p>
                            <span>{{$t('ecology_node.effective')}}</span>
                        </van-col>
                        <van-col @click.native="showLow">
                            <img src="../../assets/light.png" alt="">
                            <span>{{$t('ecology_node.button_three')}}</span>
                        </van-col>
                        <van-col @click.native="showMain">
                            <img src="../../assets/main.png" alt="">
                            <span>{{$t('ecology_node.button_four')}}</span>
                        </van-col>
                        <van-col @click.native="destoryNode">
                            <img src="../../assets/destroy.png" alt="">
                            <span>{{$t('ecology_node.destroy')}}</span>
                        </van-col>
                    </van-row>
                </div>
                <div class="profit">
                    <p>{{$t('ecology_node.income')}}</p>
                    <van-row type="flex" align="bottom">
                        <van-col span="6" offset="8">{{shouyi}}</van-col>
                        <van-col span="3" offset="6">AAT</van-col>
                    </van-row>
                </div>
                <div class="list" v-if="nodeList">
                    <p class="tip">{{$t('ecology_node.list')}}</p>
                    <ul>
                        <li v-for="item in nodeList" style="margin-bottom: 10px">
                            <p>{{item.invite_code}}<span>{{item.add_time}}</span></p>
                            <button>{{item.status}}</button>
                        </li>
                    </ul>
                </div>
                <van-action-sheet v-model="show" :title="this.$t('ecology_node.choose')" :cancel-text="$t('common.cancle')" @cancel="onCancel">
                    <p v-for="item in actions" @click="onSelect(item)">{{item.name}}</p>
                </van-action-sheet>
                <van-dialog v-model="dialogShow" @confirm="dialogConfirm" @cancel="dialogCancel" show-cancel-button :cancelButtonText="$t('common.cancle')" :confirmButtonText="$t('common.confirm')">
                    <img :src="warning">
                    <p v-if="voice == 3">{{$t('ecology_node.notice_three')}}</p>
                    <p v-if="voice == 4">{{$t('ecology_node.notice_four')}}</p>
                    <p>{{$t('ecology_node.notice_five')}}</p>
                </van-dialog>
            </div>
        </div>
        <light v-if="lightShow" @_return="_returns" :nodeNum="nodeNum"></light>
        <lead v-if="leadShow" @_return="_returns"></lead>
        <low v-if="lowShow" :status="mine.status" @_return="_returns"></low>
        <mains v-if="maindShow" :status="mine.status" @_return="_returns"></mains>
    </div>
</template>

<script>
    import light from '@/components/ecology/light'
    import lead from '@/components/ecology/lead'
    import low from '@/components/ecology/low'
    import mains from '@/components/ecology/main'
    import moment from 'moment'
    export default {
        data() {
            return {
                rent:require('../../assets/not-rent.png'),
                actions: [
                    { name: this.$t('ecology_node.button_three') },
                    { name: this.$t('ecology_node.button_four') },
                ],
                show:false,
                dialogShow:false,
                warning:require('../../assets/warnings.png'),
                nodeShow:true,
                lightShow:false,
                leadShow:false,
                mine:{},
                mainShow:true,
                nodeList:[],
                nodeNum:'',
                shouyi:'',
                voice:null,
                lowShow:false,
                maindShow:false
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            onSelect(data){
                this.show = false
                this.dialogShow = true
                if(data.name === '轻节点'){
                    this.voice = 3
                }else if(data.name === '主节点'){
                    this.voice = 4
                }
            },
            onCancel(){
                this.show = false
            },
            dialogConfirm(){
                if(this.voice === 3){
                    this.$api.post('resonate/revokenode')
                        .then(res =>{
                            this.$toast(res.message)
                            this.getData()
                        })
                }
                if(this.voice === 4){
                    this.$api.post('resonate/revokemnode')
                        .then(res =>{
                            this.$toast(res.message)
                            this.getData()
                        })
                }
            },
            dialogCancel(){
                this.dialogShow = false
            },
            _returns(){
                this.nodeShow = true
                this.lightShow = this.leadShow = this.lowShow = this.maindShow = false
                this.getData()
            },
            getData(){
                this.$api.post('user/getuserinfo')
                    .then(res =>{
                        this.mine = res.detail
                        if(this.mine.status === 1){
                            this.$toast(this.$t('ecology_node.notice'))
                            this.$router.push('/home/paid')
                        }else{
                            let type = ''
                            switch (this.mine.status) {
                                case 2:
                                    type = 1;
                                    break;
                                case 3:
                                    type = 2;
                                    this.voice = 3
                                    break;
                                case 4:
                                    this.voice = 4
                                    type = 3;
                                    break;
                                case 5:
                                    type = 4;
                                    break;
                            }
                            this.$api.post('resonate/node',{type:type})
                                .then(res =>{
                                    this.nodeNum = res.detail.num
                                    this.nodeList = res.detail.offline
                                    this.shouyi = res.detail.shouyi
                                    this.nodeList.map(i =>{
                                        i.add_time = moment(i.add_time*1000).format('YYYY-MM-DD')
                                        i.status == 1 ? i.status = this.$t('common.state_two') : i.status = this.$t('common.state_one')
                                    })
                                    if(this.nodeList.length == 0){
                                        this.nodeList = false
                                    }
                                })
                        }
                    })
            },

            changeLight(){
                this.lightShow = true
                this.nodeShow = false
            },

            changeLead(){
                this.leadShow = true
                this.nodeShow = false
            },
            destoryNode(){
                switch (this.mine.status) {
                    case 3:
                    case 4:
                        this.dialogShow = true
                        break;
                    case 5:
                        this.show = true
                        break;
                }
            },
            showLow(){
                this.lowShow = true
                this.nodeShow = false
            },
            showMain(){
                this.maindShow = true
                this.nodeShow = false
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            this.$emit('disappear')
        },
        components:{
            light,
            lead,
            low,
            mains
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .van-actionsheet__content
        p
            height 55px
            line-height 55px
            text-align center
    .van-dialog
        img
            width 66px
            display block
            margin 15px auto
        p
            text-align center
            &:last-child
                margin-bottom 15px

    .nodeMain
        width 94%
        margin 0 auto
        .van-cell
            background back
            color #1F1F1F
            align-items center
            border-radius 5px
            justify-content space-between
            .van-cell__title, .van-cell__value
                flex none
                -webkit-box-flex none
            .van-cell__title
                display flex
                align-items center
            button
                background #594E3F
                border-radius 15px
                color font
                font-size 12px
                padding 2px 12px
                float right
        .last .van-cell__title, .van-cell__value
            flex 1 !important
            -webkit-box-flex 1!important
        .rent
            background bac
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            margin-top 5px
            border-radius 5px
            overflow hidden
            .nodes
                width 70%
                margin 20px auto 0
                display flex
                display -webkit-flex
                justify-content center
                align-items center
                .zhu
                    width 90px
                    height 90px
                    border 2px solid font
                    text-align center
                    border-radius 50%
                    display flex
                    justify-content center
                    align-items center
                    position relative
                    p
                        border-radius 50%
                        border 4px solid font
                        width 60px
                        height 60px
                    .btn
                        position absolute
                        height 30px
                        width 120px
                        font-size 12px

            .van-row
                width 84%
                margin 25px auto 20px
                .van-col
                    img
                        width 35px
                        display block
                        margin 0 auto
                    p
                        font-size 20px
                        color font
                        text-align center
                        span
                            color #898989
                            font-size 10px
                    span
                        font-size 12px
                        color #898989
        .rents
            background bac
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            margin-top 5px
            border-radius 5px
            overflow hidden
            .nodes
                width 70%
                margin 20px auto 0
                display flex
                display -webkit-flex
                justify-content space-between
                align-items center
                .qing
                    background url('../../assets/qing.png') no-repeat center
                    background-size contain
                    width 90px
                    height 90px
                    line-height 90px
                    text-align center
                    color font
                .zhu
                    width 90px
                    height 90px
                    border 2px solid font
                    line-height 90px
                    text-align center
                    border-radius 50%
                    display flex
                    justify-content center
                    align-items center
                    p
                        background back
                        width 60px
                        height 60px
                        line-height 60px
                        text-align center
                        border-radius 50%


            .van-row
                width 84%
                margin 25px auto 20px
                .van-col
                    img
                        width 35px
                        display block
                        margin 0 auto
                    p
                        font-size 20px
                        color font
                        text-align center
                        span
                            color #898989
                            font-size 10px
                    span
                        font-size 12px
                        color #898989
        .rentsr
            background bac
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            margin-top 5px
            border-radius 5px
            overflow hidden
            .nodes
                width 70%
                margin 20px auto 0
                display flex
                display -webkit-flex
                justify-content center
                align-items center
                .qing
                    background url('../../assets/qing.png') no-repeat center
                    background-size contain
                    width 90px
                    height 90px
                    line-height 90px
                    text-align center
                    color font
                .zhu
                    width 90px
                    height 90px
                    border 2px solid font
                    line-height 90px
                    text-align center
                    border-radius 50%
                    display flex
                    justify-content center
                    align-items center
                    p
                        background back
                        width 60px
                        height 60px
                        line-height 60px
                        text-align center
                        border-radius 50%


            .van-row
                width 84%
                margin 25px auto 20px
                .van-col
                    img
                        width 35px
                        display block
                        margin 0 auto
                    p
                        font-size 20px
                        color font
                        text-align center
                        span
                            color #898989
                            font-size 10px
                    span
                        font-size 12px
                        color #898989
        .profit{
            background bac
            margin-top: 10px;
            padding: 10px 10px 15px
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            border-radius: 5px;
            &:last-child {
                margin-top 5px
            }
            p{
                color: #707070
                font-size 12px
            }
            .van-row {
                margin-top: 5px;
                align-items: baseline;
                .van-col {
                    text-align: center;
                }
                .van-col--6 {
                    font-size: 24px;
                    color: font;
                }
                .van-col--3{
                    color: #707070
                }
            }
        }

        .list
            margin-top 15px
            .tip
                border-left 3px solid font
                padding-left 4px
                color #D8D8D8
            ul
                margin-top 5px
                li
                    padding 15px
                    display flex
                    display -webkit-flex
                    justify-content space-between
                    align-items center
                    background bac
                    border-radius 5px
                    p
                        font-size 20px
                        color font
                        span
                            display block
                            font-size 10px
                            color #898989
                    button
                        border 1px solid font
                        color font
                        outline none
                        background none
                        font-size 10px
                        padding 10px 30px
                        border-radius 25px
        .good
            margin-top 15px
            .tip
                border-left 3px solid font
                padding-left 4px
                color #D8D8D8
            .main
                background bac
                height 350px
                margin-top 10px
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);



</style>